<template>
  <view class="index-page">
    <view class="search-box">
      <u-search
        placeholder="输入商品名称/订单编号"
        v-model="data.keyword"
        :shape="`square`"
        :show-action="false"
        :disabled="true"
        :placeholder-color="`#BCBCBC`"
        :search-icon-color="`#BCBCBC`"
        :bgColor="`#F4F5F7`"
        @click="toSearch"
      ></u-search>
    </view>
    <view class="tab-box">
      <u-tabs
        :list="data.tabList"
        :current="data.tabCurrent"
        :inactive-color="`#8A8A8A`"
        :active-color="`#262626`"
        :bar-width="80"
        :bar-height="6"
        :bar-style="{
          backgroundColor: '#04B27C'
        }"
        @change="tabChange"
      ></u-tabs>
    </view>

    <view class="page-content">
      <scroll-view
        class="scroll-box"
        :scroll-x="false"
        :scroll-y="true"
        :lower-threshold="50"
        @scrolltolower="moreLoad"
        :refresher-enabled="true"
        :refresher-triggered="data.isTriggered"
        @refresherrefresh="onRefresh"
      >
        <view class="list-content">
          <Item v-for="item in data.records" :key="item" :data="item" />
          <view class="empty-box" v-if="data.isEmpty">
            <u-image
              class="empty-img"
              width="368rpx"
              height="368rpx"
              src="../../static/images/empty.png"
              :show-loading="false"
              :fade="false"
            ></u-image>
            <view class="text">暂无订单</view>
          </view>
          <view class="load-more-box" v-if="data.total !== 0">
            <u-loadmore
              :status="data.status"
              color="#8A8A8A"
              :loadText="{
                loadmore: '加载更多',
                loading: '正在加载...',
                nomore: '已经到底啦～'
              }"
            />
          </view>
        </view>
      </scroll-view>

      <Cancel ref="cancelModal" @getTabData="getTabData" />
    </view>
  </view>
</template>

<script setup>
import { reactive, ref, provide } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import Item from './components/item.vue'
import { orderList } from '@/api/api'
import { tabList } from './const.js'
import Cancel from './components/cancel.vue'

// 搜索model
const data = reactive({
  keyword: '',
  status: 'loadmore',
  total: 0,
  records: [],
  page: 1,
  size: 10,
  tabList,
  tabCurrent: 0,
  isEmpty: false,
  isTriggered: false
})
const getData = async (postData = {}, type = 'push') => {
  data.status = 'loading'
  data.isEmpty = false
  if (type === 'pull') {
    data.isTriggered = true
  }
  if (!uni.getStorageSync('userInfo')) {
    uni.redirectTo({
      url: '/pages/login/index'
    })
    return
  }
  const res = await orderList({
    current: data.page,
    size: data.size,
    orderStatus: data.tabList.find((item, index) => index === data.tabCurrent)
      .value,
    customerCreditCode:
      JSON.parse(uni.getStorageSync('userInfo'))?.creditCode || '',
    orders: [
      {
        column: 'create_time',
        asc: false
      }
    ],
    ...postData
  })
  data.total = res.data?.total || 0
  if (type === 'push') {
    data.records = data.records.concat(res.data?.records || [])
  } else {
    data.records = res.data?.records || []
  }

  if (res.data?.records.length < data.size) {
    data.status = 'nomore'
  } else {
    data.status = 'loading'
  }
  if (data.records.length === 0) {
    data.isEmpty = true
  }
  if (type === 'pull') {
    data.isTriggered = false
  }
}

const onRefresh = () => {
  data.total = 0
  data.page = 1
  data.size = 10
  getData({}, 'pull')
}

onLoad(() => {
  data.total = 0
  data.page = 1
  data.size = 10
  getData({}, 'replace')
})

// eslint-disable-next-line consistent-return
const returnPageGetData = () => {
  if (data.total === 0) {
    return false
  }
  getData(
    {
      current: 1,
      size: data.total
    },
    'replace'
  )
}

function getSupplierCode() {
  const launchOptions = uni.getEnterOptionsSync()
  const { query } = launchOptions
  return query.supplier_code
}

function getSource() {
  const launchOptions = uni.getEnterOptionsSync()
  const { query } = launchOptions
  return query.source
}

onShow(() => {
  /* eslint-disable */
  const supplier_code = getSupplierCode()
  console.log('supplier_code', supplier_code)
  if (supplier_code) {
    uni.setStorageSync('supplier_code', supplier_code)
  }
  const source = getSource()
  console.log('source', source)
  if (source) {
    onRefresh()
  }
  returnPageGetData()
})

// 下拉加载更多
// eslint-disable-next-line consistent-return
const moreLoad = () => {
  if (data.status === 'nomore') {
    return false
  }
  // eslint-disable-next-line no-plusplus
  data.page = ++data.page
  getData()
}

const tabChange = (index) => {
  data.tabCurrent = index
  data.total = 0
  data.page = 1
  data.size = 10
  getData({}, 'replace')
}

const getTabData = () => {
  returnPageGetData()
}

// 前往搜索页
const toSearch = () => {
  uni.navigateTo({
    url: '/pages/order-search/index'
  })
}

const cancelModal = ref(null)
// 订单号弹指定窗口
const cancelShow = (code) => {
  cancelModal.value.showModal(code)
}

provide('cancelShow', cancelShow)
</script>

<style lang="scss" scoped>
.index-page {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: #fff;

  .page-title {
    width: 100%;
    height: 328rpx;
    background: url('https://prod-ylzapp-public.oss-cn-zhangjiakou.aliyuncs.com/freshx/wxapp/bg.jpg')
      no-repeat left top;
    background-size: 100% 100%;
    .inner-title {
      width: 100%;
      display: block;
      text-align: center;
      margin-top: 108rpx;
      font-size: 34rpx;
    }
  }
  .search-box {
    width: 686rpx;
    height: 104rpx;
    margin-left: 32rpx;
    background-color: #ffffff;
    :deep(.u-search) {
      width: 100%;
      height: 100%;
    }
  }

  .page-content {
    flex: 1;
    overflow: hidden;
    background: #F4F5F7;
    .scroll-box {
      height: 100%;
    }
    .list-content {
      width: 100%;
      margin: 0 auto;
      margin-bottom: 32rpx;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }

    .load-more-box {
      width: 100%;
      margin: 0 auto;
      padding: 24rpx 0;
      background-color: #F4F5F7;
    }
  }
}

:deep(.btn-order-box) {
  .u-btn {
    height: 64rpx;
    line-height: 64rpx;
  }
  .btn-style-1 {
    .u-btn {
      padding: 10rpx 32rpx;
      width: 176rpx;
      height: 64rpx;
      background: #ffffff;
      border-radius: 8rpx;
      color: #04b27c;
      font-weight: 400;
      font-size: 28rpx;
      line-height: 44rpx;
    }
  }
  .btn-style-2 {
    .u-btn {
      font-weight: 400;
      font-size: 28rpx;
      line-height: 44rpx;
      color: #ffffff;
    }
  }
}

.empty-box {
  width: 100%;
  text-align: center;
  margin-top: 200rpx;
  .empty-img {
    width: 368rpx;
    height: 368rpx;
    display: block;
    margin: 0 auto;
  }
  .text {
    font-size: 28rpx;
    line-height: 40rpx;
    color: #8a8a8a;
  }
}

.tab-box {
  :deep(.u-scroll-view) {
    ::-webkit-scrollbar {
      width: 0;
      height: 0;
      color: transparent;
      display: none;
    }
  }
}
</style>
